<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="./js/jquery.min.js"></script>
		<script type="text/javascript" src="./js/echarts.js"></script>
		<style>
			.zhxqmax{
				width: 1920px;
				height: 1080px;
				background: url('./img/bg.png');
			}
			#MECha_1{
				position: absolute;
				left: 490px;
			    top: 190px;
			    width: 900px;
			    height: 660px;
			}
			.imgBox{
				position: absolute;
				left: 881px;
    			top: 416px;
			    width: 140px;
			    height: 100px;
			}
			.lightBox{
				position: absolute;
				left: 928px;
			    top: 422px;
			    width: 45px;
			    /*height: 100px;*/
			}
		</style>
	</head>

	<body class="zhxqmax">
		<div id = 'MECha_1'></div>
		<div class="imgBox"><img src="./img/15.gif" style="width: 100%"></div>
		<div class="lightBox"><img src="./img/光.png" style="width: 100%"></div>
		<script>
			
			var myChart1 = echarts.init(document.getElementById('MECha_1'));
			
			let [dataArr, allArr, erArr, sanArr] = [[], [], [], []];
			// 行为标注 show first row
			let items = [

				{
				  symbol: "",
				  name: "实验中心",
				  pointType: "point",
				  belong: "学生基本数据",
				},
				{
				  symbol: "",
				  name: "人事处",
				  pointType: "point",
				  belong: "学生基本数据",
				},
				{
				  symbol: "",
				  name: "教务处",
				  pointType: "point",
				  belong: "学生基本数据",
				},
				
				{
				  symbol: "",
				  name: "团委",
				  pointType: "point",
				  belong: "班级数据",
				},
				{
				  symbol: "",
				  name: "教务系统",
				  pointType: "point",
				  belong: "班级数据",
				},
				
				{
				  symbol: "",
				  name: "办公室",
				  pointType: "point",
				  belong: "排课数据",
				},
				{
				  symbol: "",
				  name: "OA系统",
				  pointType: "point",
				  belong: "排课数据",
				},
				{
				  symbol: "",
				  name: "腾讯邮箱",
				  pointType: "point",
				  belong: "教职工基础数据",
				},
				{
				  symbol: "",
				  name: "云盘",
				  pointType: "point",
				  belong: "教职工基础数据",
				},
				
				{
				  symbol: "",
				  name: "国际学院",
				  pointType: "point",
				  belong: "科研数据",
				},
				{
				  symbol: "",
				  name: "计算机",
				  pointType: "point",
				  belong: "科研数据",
				},
				{
				  symbol: "",
				  name: "警务指挥",
				  pointType: "point",
				  belong: "科研数据",
				},

				{
				  symbol: "",
				  name: "大数据研究院",
				  pointType: "point",
				  belong: "论文数据",
				},
				{
				  symbol: "",
				  name: "政治部",
				  pointType: "point",
				  belong: "论文数据",
				},
				{
				  symbol: "",
				  name: "馆藏地",
				  pointType: "point",
				  belong: "图书数据",
				},
				
				{
				  symbol: "",
				  name: "图书馆",
				  pointType: "point",
				  belong: "图书数据",
				},
				{
				  symbol: "",
				  name: "藏书",
				  pointType: "point",
				  belong: "图书数据",
				},
				
				{
				  symbol: "",
				  name: "网路部门",
				  pointType: "point",
				  belong: "用户上网信息",
				},
				{
				  symbol: "",
				  name: "计算机系",
				  pointType: "point",
				  belong: "用户上网信息",
				},
				
				
				
				{
				  symbol: "",
				  name: "保卫处",
				  pointType: "point",
				  belong: "过车数据",
				 
				},
				{
				  symbol: "",
				  name: "后勤部",
				  pointType: "point",
				  belong: "过车数据",
				},
				{
				  symbol: "",
				  name: "信息部",
				  pointType: "point",
				  belong: "人脸抓拍数据",
				},
				{
				  symbol: "",
				  name: "治安系",
				  pointType: "point",
				  belong: "人脸抓拍数据",
				},
				{
				  symbol: "",
				  name: "招生办",
				  pointType: "point",
				  belong: "个人通讯信息",
				},
				{
				  symbol: "",
				  name: "其他",
				  pointType: "point",
				  belong: "个人通讯信息",
				},
				{
				  symbol: "",
				  name: "学生基本数据",
				  pointType: "cloud",
				},
				
				{
				  symbol: "",
				  name: "班级数据",
				  pointType: "cloud",
				},
				
				{
				  symbol: "",
				  name: "排课数据",
				  pointType: "cloud",
				},
				{
				  symbol: "",
				  name: "教职工基础数据",
				  pointType: "cloud",
				},
				{
				  symbol: "",
				  name: "科研数据",
				  pointType: "cloud",
				},
				{
				  symbol: "",
				  name: "论文数据",
				  pointType: "cloud",
				},
				{
				  symbol: "",
				  name: "图书数据",
				  pointType: "cloud",
				},
				{
				  symbol: "",
				  name: "用户上网信息",
				  pointType: "cloud",
				},
				{
				  symbol: "",
				  name: "过车数据",
				  pointType: "cloud",
				},
				{
				  symbol: "",
				  name: "人脸抓拍数据",
				  pointType: "cloud",
				},
				{
				  symbol: "",
				  name: "个人通讯信息",
				  pointType: "cloud",
				},
			]
			// 点
			items.forEach((el, ind) => {
			  if (el.pointType === "cloud") {
			    // 云
			    el.symbol = "image://";
			    el.symbolSize = [50, 46];
			    el.label = {
			      normal: {
			        show: true,
			        position: "bottom",
			        borderWidth: 1,
			        borderRadius: 12,
			        padding: [4, 8, 4, 8],
			        distance: 10,
			        color: "rgb(255,255,255)",
			        borderColor: "rgb(89,197,238)",
			      },
			    };
			    erArr.push(el);
			  } else if (el.pointType === "point") {
			    // 球
			    el.symbol = "image://";
			    el.symbolSize = [18, 18];
			    el.itemStyle = {
			      borderColor: el.pointColor ? el.pointColor : 'rgba(4, 242, 28, 1)',
			      borderWidth: 3,
			      color: "#0ceffd",
			    };
			    // 清除没有父节点的值
			    // sanArr.push(el);
			    if (el.belong && !items.some((iteP) => el.belong === iteP.name)) {
			      items.splice(ind, 1);
			    } else {
			      sanArr.push(el);
			    }
			  }
			  if (!el.belong) {
			    el.children = [];
			    items.forEach((es) => {
			      if (es.belong === el.name) {
			        el.children.push(es);
			      }
			    });
			    allArr.push(el);
			  }
			});

			// 圆形分区
			function group(arr, r) {
			  const newArray = [];
			  const { length: arLen } = arr;
			  arr.forEach((e, ind) => {
			    // 按角度均匀分布
			    const ang = 90 - (360 / arLen).toFixed(2) * (ind + 1);
			    const x = (Math.cos(ang * Math.PI / 180)).toFixed(2) * r;
			    const y = (Math.sin(ang * Math.PI / 180)).toFixed(2) * r;
			    e.value = [x.toFixed(2), y.toFixed(2)];
			    if (e.belong) {
			      let rotate = '';
			      const angle = (160 / arr.length).toFixed(2);
			      if (x > 0 && y >= 0) {
			        rotate = (r - angle * (ind)).toFixed(2);
			        // rotate = (90 - 360 / arr.length * (ind + 1)).toFixed(2);
			      } else if (x <= 0 && y > 0) {
			        rotate = (-r + angle * (arr.length - ind)).toFixed(2);
			      } else if (x < 0 && y <= 0) {
			        rotate = (r - angle * (ind - arr.length * 0.5)).toFixed(2);
			      } else if (x >= 0 && y < 0) {
			        rotate = (-8 + angle * (arr.length * 0.25 - ind)).toFixed(2);
			      }
			      e.label = {
			        show: true,
			        width: 200,
			       
			        color: {
			          lineColor: {
			            color: "rgb(24,163,239)",
			          },
			        },
			        normal: {
			            show: true,
			            align: x > 0 ? 'left' : 'right',
			            padding: x > 0 ? [0, 0, 0, 20] : [0, 20, 0, 0],
			            rotate,
			            // position: "bottom",
			            // borderWidth: 1,
			            // borderRadius: 12,
			            // padding: [4, 8, 4, 8],
			            // distance: 10,
			            color: "rgba(67,237,241, 1)",
			            // borderColor: "rgb(89,197,238)",
			         },
			      };
			    }
			    newArray.push(e);
			  });
			  return newArray;
			}
			// 线配置
			function linesConfig(arr) {
			  const [dataArr, targetCoord] = [[], [0, 0]];
			  arr.forEach((el) => {
			    if (!el.belong) {
			      dataArr.push([
			        { coord: targetCoord },
			        {
			          coord: el.value,
			          lineStyle: el.lineStyle,
			          effect: {
			            show: true,
		                smooth: false,
		                trailLength: 0,
		                symbol: "image://",
		                symbolSize: [20, 60],
		                period: 4,
		                delay: 2
			          },
			        },
			      ]);
			      arr.forEach((element) => {
			        if (element.belong === el.name) {
			          dataArr.push([
			            { coord: el.value },
			            {
			              coord: element.value,
			              lineStyle: element.lineStyle,
			              effect: {
			                show: true,
				            smooth: false,
				            trailLength: 0,
				            symbol: "image://",
				            symbolSize: [10, 30],
				            period: 4,
				            delay: 2
			              },
			            },
			          ]);
			        }
			      });
			    }
			  });
			  return dataArr;
			}
			// 点分布
			erArr = group(erArr, 36);
			sanArr = group(sanArr, 50);
			allArr = [...erArr, ...sanArr];
			// 线坐标和配置
			dataArr = linesConfig(allArr);
			option = {
			  // backgroundColor: '#000',
			  xAxis: {
			    show: false,
			    type: "value",
			    max: 50,
			    min: -51,
			  },
			  grid: {
			    top: 70,
			    bottom: 70,
			    left: 60,
			    right: 60,
			  },
			  yAxis: {
			    show: false,
			    type: "value",
			    max: 50,
			    min: -50,
			  },
			  series: [{
			    type: "graph",
			    coordinateSystem: "cartesian2d",
			    z: 3,
			    itemStyle: {
			      normal: {
			        shadowColor: "none",
			      },
			    },
			    data: allArr,
			  },
			  {
			    name: "",
			    type: "lines",
			    coordinateSystem: "cartesian2d",
			    polyline: true,
			    z: 1,
			    lineStyle: {
			       	width: 2,
                	color: 'rgb(255,255,255)',
                	curveness: 0
			    },
			    effect: {
			    	show: true,
	                smooth: false,
	                trailLength: 0,
	                symbol: "image://",
	                symbolSize: [10, 30],
	                period: 4,
	                delay: 2
			      // show: true,
			      // smooth: false,
			      // trailLength: 0, // 拖尾的长度
			      // symbol: 'pin', // 动画的类型
			    },
			    data: dataArr,
			  },
			  ],
			}
			myChart1.setOption(option);

		</script>
	</body>

</html>